<!--
 作者：ex_baiyc
 日期：2016-10-11
 功能：知己彼-对比页面中选择产品
 参数：需要从父组件中传递组件中默认显示的文字
 事件：点击输入框输入进行模糊查询
-->
<template>
  <div class="select-product">
    <div class="select-brand">
      <div @click="showProductA($event)">
        <div class="search-wrap">
          <div class="search-text">
            <span class="">{{selectAText.replace('|', '')}}</span>
            <span class="caret"></span>
          </div>
          <input v-show="productAOpenStatus" class="input-search" type="text" v-model="KeyWordsA"
                 placeholder="输入关键字模糊搜索" id="productAInput">
        </div>
      </div>
      <div @click="showProductB($event)">
        <div class="search-wrap">
          <div class="search-text">
            <span>{{selectBText.replace('|', '')}}</span>
            <span class="caret"></span>
          </div>
          <input v-show="productBOpenStatus" class="input-search" type="text" v-model="KeyWordsB"
                 placeholder="输入关键字模糊搜索"  id="productBInput">
        </div>
      </div>
    </div>
    <!--点击选择产品A后弹出窗口-->
    <div class="product-list" v-if="productAOpenStatus">
      <div>
        <ul class="productList-brand">
          <li v-for="item in brands | filterBy KeyWordsA" @click="changeBrandA(item)"
              :class="[{'brand-active': brandActiveIndex == item}]">{{item}}
          </li>
        </ul>
        <div class="productList-product ">
          <!-- <div class="thead display-flex">
            <div v-for="item in thead" class="">{{item}}</div>
          </div> -->
          <div class="tbody">
           <!--  <table>
              <tr v-for="row in tableRows" @click="chooseProductA(row, $event)">
                <td v-for="item in gridColumns" v-html="row[item]" :id="$parent.$index">
                </td>
              </tr>
            </table> -->
            <table-locked-a :table-rows="tableRows" :grid-columns="gridColumns" :thead="thead" :height="'69vh'" :industry="'selectProduct'">
            </table-locked-a>
          </div>
        </div>
      </div>
    </div>

    <!--点击选择产品B后弹出窗口-->
    <div class="product-list" v-if="productBOpenStatus">
      <div>
        <ul class="productList-brand">
          <li v-for="item in brands" @click="changeBrandB(item)"
              :class="[{'brand-active': brandBctiveIndex == item}]">{{item}}
          </li>
        </ul>
        <div class="productList-product">
          <!-- <div class="thead display-flex">
            <div v-for="item in thead">{{item}}</div>
          </div> -->
          <div class="tbody">
            <!-- <table>
              <tr v-for="row in tableRows" @click="chooseProductB(row, $event)">
                <td v-for="item in gridColumns" v-html="row[item]" :id="$parent.$index">
                </td>
              </tr>
            </table> -->
            <table-locked-b :table-rows="tableRows" :grid-columns="gridColumns" :thead="thead" :height="'69vh'" :industry="'selectProduct'">
            </table-locked-b>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import TableView1 from '../common/TableView1.vue'
  import TableLockedA from './TableLockedForProA.vue'
  import TableLockedB from './TableLockedForProB.vue'
  export default{
    props: ['productList', 'openState', 'selectAText', 'selectBText', 'defaultOrgId', 'defaultCategory', 'defaultCategoryId', 'modelA', 'modelB'],
    components: {
      TableView1,
      TableLockedA,
      TableLockedB
    },
    data () {
      return {
        productAOpenStatus: false,
        productBOpenStatus: false,
        brands: [],
        tableTitle: '',
        tableRows: [],
        gridColumns: ['brand', 'model', 'sale', 'all_comment', 'sale_price', 'score_bads_percentage'],
        thead: ['品牌', '型号', '销量', '评论', '价格', '差评率'],
        brandActiveIndex: '全部',
        brandBctiveIndex: '全部',
        activeSelectIndex: -1,
        selectASalePrice: '',
        selectASale: '',
        selectAAllComment: '',
        selectABadComment: '',
        UrlParams: {
//          refresh: true,
//          username: 'shisj',
          startTime: '',
          endTime: '',
          category_id: '',
          brand: '',
          brand1: '',
          brand2: '',
          nobrand: false, // true 则不返回品牌 false 返回品牌
          model1: '',
          model2: '',
          product: '',
          competition: false, // true 为产品B  false 为产品A
          model_id: '',
          includeCollect: true, // 是否包含收藏的品牌
          condition: '',
          sale_price: '',
          sale: '',
          all_comment: '',
          bad_comment: '',
          page: 1,
          rows: 50
        }
      }
    },
    methods: {
//      显示产品A 弹窗
      showProductA: function (event) {
        this.productAOpenStatus = !this.productAOpenStatus
        this.productBOpenStatus = false
        this.UrlParams.model1 = ''
        this.UrlParams.brand = ''
        this.UrlParams.competition = false
        this.getBrandA(this.UrlParams)
      },
//      获取产品A 弹窗中的品牌
      getBrandA: function (params) {
        var _this = this
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        this.$http.post(window.interface.loadProducts, params).then(function (res) {
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          var data = res.json()
          _this.brands = data.brands
          _this.tableRows = data.products
          _this.brands.unshift('全部')
          // _this.brandActiveIndex = data.brands[0]
        })
      },
//      选择不同品牌
      changeBrandA: function (item) {
        this.brandActiveIndex = item
        this.UrlParams.brand = item
        if (item === '全部') {
          this.UrlParams.brand = ''
        }
        this.getProductA(this.UrlParams)
      },
//      获取产品A 弹窗中的产品
      getProductA: function (params, item) {
        var _this = this
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        this.$http.post(window.interface.loadProducts, params).then(function (res) {
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          var data = res.json()
          _this.tableRows = data.products
        })
      },
//      选中产品
      chooseProductA: function (row, event) {
        this.productAOpenStatus = false
        this.productBOpenStatus = false
        this.selectAText = row.brand + row.model
        this.selectASalePrice = row.sale_price
        this.selectASale = row.sale
        this.selectAAllComment = row.all_comment
        this.selectABadComment = row.bad_comment
        this.KeyWordsA = ''
//      将选择的产品A传递到父组件中，用于请求新数据
        this.$dispatch('chooseProductA', row, this.selectBText)
        this.UrlParams.model1 = this.selectAText
      },
//      显示产品B 弹窗
      showProductB: function (event) {
        this.productBOpenStatus = !this.productBOpenStatus
        this.productAOpenStatus = false
        this.UrlParams.brand = ''
        this.UrlParams.competition = true
        this.getBrandB(this.UrlParams)
      },
//      获取产品B 弹窗中品牌
      getBrandB: function (params) {
        var _this = this
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        this.$http.post(window.interface.loadProducts, params).then(function (res) {
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          var data = res.json()
          _this.brands = data.brands
          _this.brands.unshift('全部', '相似价格', '相似销量', '相似评论', '相似差评')
          _this.tableRows = data.products
        })
      },
//      选择品牌B
      changeBrandB: function (item) {
        this.brandBctiveIndex = item
        this.UrlParams.brand2 = item
        this.getProductB(this.UrlParams, item)
      },
//      获取选中的品牌B 的产品, 如果选择的不是品牌,而是其他与产品A 相似的条件,则更改请求参数
      getProductB: function (params, item) {
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        var _this = this
        _this.UrlParams.brand = item
        _this.UrlParams.competition = true
        switch (item) {
          case '全部':
            _this.UrlParams.brand = ''
            _this.UrlParams.brand2 = ''
            _this.UrlParams.model1 = ''
            _this.UrlParams.sale_price = ''
            _this.UrlParams.sale = ''
            _this.UrlParams.all_comment = ''
            _this.UrlParams.bad_comment = ''
            break
          case '相似价格':
            _this.UrlParams.condition = 'sale_price'
            _this.UrlParams.brand = ''
            _this.UrlParams.brand2 = ''
            _this.UrlParams.sale_price = this.selectASalePrice
            break
          case '相似销量':
            _this.UrlParams.condition = 'sale'
            _this.UrlParams.brand2 = ''
            _this.UrlParams.sale = this.selectASale
            break
          case '相似评论':
            _this.UrlParams.condition = 'all_comment'
            _this.UrlParams.brand = ''
            _this.UrlParams.brand2 = ''
            _this.UrlParams.all_comment = this.selectAAllComment
            break
          case '相似差评':
            _this.UrlParams.condition = 'bad_comment'
            _this.UrlParams.brand = ''
            _this.UrlParams.brand2 = ''
            _this.UrlParams.bad_comment = this.selectABadComment
            break
          default:
            this.UrlParams.condition = ''
            this.UrlParams.sale = ''
            this.UrlParams.sale_price = ''
            this.UrlParams.all_comment = ''
            this.UrlParams.bad_comment = ''
        }
        document.getElementsByClassName('loading-box')[0].style.display = 'block'
        this.$http.post(window.interface.loadProducts, params).then(function (res) {
          document.getElementsByClassName('loading-box')[0].style.display = 'none'
          var data = res.json()
          _this.tableRows = data.products
        })
      },
//      选中产品B
      chooseProductB: function (row, event) {
        this.selectBText = row.brand + row.model
        // 将选择的产品B传递到父组件中，用于请求新数据
        this.$dispatch('chooseProductB', row)
        this.productAOpenStatus = false
        this.productBOpenStatus = false
        this.KeyWordsB = ''
        // document.querySelectorAll('.search-text')[1].style.width = 'auto'
      }
    },
    ready: function () {
      // setTimeout(() => {
      //   this.selectAText = this.$parent.modelA
      //   this.selectBText = this.$parent.modelB
      // }, 1000)
//      阻止input框冒泡，否则会导致点击input时窗口关闭
      var inputEle = document.querySelectorAll('.input-search')
      for (var i = 0; i < inputEle.length; i++) {
        inputEle[i].addEventListener('click', function (event) {
          event.stopPropagation()
        })
      }
      // document.querySelector('.product-list').addEventListener('touchmove', function (event) {
      //   event.stopPropagation()
      //   return false
      // })
//      input 聚焦时修改页面部分位置样式
      var productAInput = document.getElementById('productAInput')
      var productBInput = document.getElementById('productBInput')
      productAInput.onfocus = function () {
        document.body.setAttribute('id', 'inputFocus')
      }
      productAInput.onblur = function () {
        document.body.removeAttribute('id')
      }
      productBInput.onfocus = function () {
        document.body.setAttribute('id', 'inputFocus')
      }
      productBInput.onblur = function () {
        document.body.removeAttribute('id')
      }
//      监听 input框输入,进行模糊查询
      productAInput.addEventListener('change', (event) => {
        var queryKeyWords = event.target.value
        if (queryKeyWords.length > 10) {
          window.alert('不要输太多字呦！')
          productAInput.value = queryKeyWords.substr(0, 10)
          return
        }
        if (queryKeyWords) {
          document.getElementsByClassName('loading-box')[0].style.display = 'block'
          this.$http.post(window.interface.loadProducts, {
            model: queryKeyWords,
            category_id: this.UrlParams.category_id
          }).then((res) => {
            document.getElementsByClassName('loading-box')[0].style.display = 'none'
            var data = res.json()
            this.tableRows = data.products
          })
        }
      })
      productBInput.addEventListener('change', (event) => {
        var queryKeyWordsB = event.target.value
        if (queryKeyWordsB.length > 10) {
          window.alert('不要输太多字呦！')
          productBInput.value = queryKeyWordsB.substr(0, 10)
          return
        }
        if (queryKeyWordsB) {
          document.getElementsByClassName('loading-box')[0].style.display = 'block'
          this.$http.post(window.interface.loadProducts, {
            brand2: this.UrlParams.brand2 || '',
            model1: this.UrlParams.model1 || '',
            model2: queryKeyWordsB,
            competition: true,
            category_id: this.UrlParams.category_id || '',
            nobrand: true
          }).then((res) => {
            document.getElementsByClassName('loading-box')[0].style.display = 'none'
            var data = res.json()
            this.tableRows = data.products
          })
        }
      })
    },
    watch: {
      'modelA': function (newV) {
        setTimeout(() => {
          this.selectAText = this.$parent.productA
        }, 100)
      },
      'modelB': function (newV) {
        setTimeout(() => {
          this.selectBText = this.$parent.productB
        }, 100)
      },
      'defaultOrgId': function (newV) {
      },
      'defaultCategoryId': function (newV) {
        // setTimeout(() => {
        this.UrlParams.category_id = newV
        // }, 1000)
      },
      'defaultCategory': function (newv) {
        this.categorysActive = newv
      }
    },
    events: {
      'choosePro': function (row) {
        if (this.productAOpenStatus) {
          this.chooseProductA(row)
        } else if (this.productBOpenStatus) {
          this.chooseProductB(row)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .select-product {
    text-align: center;
  }

  .brand-active {
    background: #4A90E2;
    color: #fff;
    border-right: none;
  }

  .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }

  .input-search {
    padding-left: .2rem;
    outline: none;
    height: 100%;
    width: 50%;
    border: transparent;
    background: #f8f8f8;
    border-left: 1px solid #e4e4e4;
    vertical-align: top;
  }

  .search-text {
    display: inline-block;
    width: 45%;
    background: #FFF;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
  }

  .search-text span:nth-child(1){
    // max-width: 100%;
  }

  .search-wrap {
    position: relative;
    margin: .2rem auto;
    width: 90%;
    height: 5vh;
    line-height: 5vh;
    overflow-y: scroll;
    background: #fff;
    border: 1px solid #E4E4E4;
    z-index: 2;
    overflow: hidden;
  }

  .product-list {
    position: fixed;
    top: 22.5vh;
    left: 0;
    right: 0;
    width: 100%;
    height: 72vh;
    overflow-y: scroll;
    background: rgba(255, 255, 255, 1);
    border: 1px solid #eee;
    z-index: 10;

  &>div {
    display: flex;
    height: 100%;
  }

  .productList-brand {
    margin-top: .93rem;
    width: 21%;
    height: 90%;
    overflow-y: scroll;
    border-right: 1px solid #ddd;
    box-shadow: 1px 0px 1px #e5e5e5;
    z-index: 2;

  li {
    padding: .2rem 0;

  }

  }
  }

  .productList-product {
    width: 79%;
    overflow-y: hidden;

  // .thead {
  //   height: .97rem;
  //   align-items: center;
  //   color: #666;

  //   div:nth-child(1){
  //     width: 20%;
  //   }
  //   div:nth-child(2){
  //     width: 40%;
  //   }
  //   div:nth-child(3){
  //     width: 20%;
  //   }
  //   div:nth-child(4){
  //     width: 20%;
  //   }
  // }

  // .tbody {
  //   height: 62vh;
  //   width: 79vw;
  //   overflow-y: scroll;
  //   color: #666;

  // table {
  //   width: 100%;
  //   border-spacing: 0;
  //   color: #666;

  // tr {
  //   height: 1rem;
  //   /*line-height: .8rem;*/
  // }
  // tr{
  //   td:nth-child(1){
  //     width: 15%;
  //   }
  //   td:nth-child(2){
  //     width: 40%;
  //   }
  //   td:nth-child(3){
  //     width: 20%;
  //   }
  //   td:nth-child(4){
  //     width: 20%;
  //   }
  // }
  // tr:nth-child(odd) {
  //   background: rgba(228, 240, 255, .6);
  // }

  // tr:nth-child(even) {
  //   background: rgba(244, 249, 255, .4);
  // }

  // td {
  //   border: 0px;
  //   vertical-align: middle;
  // }

  // }
  // }
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
    font-size: 10px;
  }
</style>
